import type { Meta, StoryObj } from '@storybook/vue3-vite';

import { fn } from 'storybook/test';

import { NEllipsis } from 'naive-ui';


const meta = {
  title: 'Navie UI/NEllipsis',
  component: NEllipsis,
  tags: ['autodocs'],
  render: (args) => ({
    components: { NEllipsis },
    setup() {
      return { args };
    },
    template: '<div style="width: 150px"><NEllipsis v-bind="args" >这是一个很长的文本，如果超出指定行数，将会被截断并显示省略号。</NEllipsis></div>',
  }),
  argTypes: {
    tooltip: {
      control: 'boolean',
      description: 'Whether to show a tooltip with the full text when hovering over the ellipsis.'
    },
    lineClamp: {
      control: 'number',
      description: 'The number of lines to display before truncating the text with an ellipsis.'
    },
    expandTrigger: {
      control: 'select',
      options: [undefined, 'click'],
      description: 'The trigger action to expand the ellipsis and show the full text.'
    },
  },
  args: {
    tooltip: true,
    lineClamp: undefined,
    expandTrigger: undefined,
  },

} satisfies Meta<typeof NEllipsis>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {

  },
};

export const TooltipSlot: Story = {
  name: '定制 Tooltip 内容',
  args: {
    ...meta.args,
  },
  render: (args) => ({
    components: { NEllipsis },
    setup() {
      return { args };
    },
    template: `
      <div style="width: 150px">
        <NEllipsis v-bind="args">
          <template #tooltip>
            <div>自定义提示内容</div>
          </template>
          这是一个很长的文本，如果超出指定行数，将会被截断并显示省略号。
        </NEllipsis>
      </div>
    `,
  }),
}